﻿<template>
    <div class="email-content">
        <div class="email-up">
            <div class="imgs"><img src="../assets/reviewer.jpg" alt=""></div>
            <div class="email-talk">
                <textarea placeholder="说点什么吧" v-model="articalTitle1" id="talk"></textarea>
                <input id="emails" type="text" v-model="articalDescription1"  placeholder="邮箱(用于通知)">
                <input id="name" class="input-two" v-model="name" type="text" placeholder="称呼">
                <button @click="valid()">发布评论</button>
            </div>
        </div>
        <div class="email-down">
            <div class="down-box">
                <span>评论</span>
                <span>最早|最新|最热</span>
            </div>
            
        </div>


        <div class="msg-item" v-for="(item,index) in msg" :key="index">
            <!-- <p>哎，没人理我：{{msg}}</p> -->
            <span class="first">{{item.name}}</span>
            <span class="second">{{item.email}}</span><br>
            <span class="third">{{item.comment}}</span>
            <button @click="deletes(index)">删除</button>
        </div>

    </div>
</template>

<script>
export default {

    // data(){
    //     return{
    //         comments:[]
    //     }
        
    // },

    data(){
        return{
            articalTitle1:'',
            articalDescription1:'',
            mydate1:'',
            name:'',
            msg:''
        }
    },

    methods: {

        valid(){
            let emails = document.getElementById("emails").value;
            let names = document.getElementById("name").value;
            let talk = document.getElementById("talk").value;

            if (!(/^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(emails))){
                alert("请输入正确的邮箱");
                return
            }
            if(/^\s*$/.test(talk)){
                alert("请输入内容");
                return
            } 
            if(/^\s*$/.test(names)){
                alert("请输入邮箱主题");
                return
            }

            // this.$axios.get("/api/comments",{
            //     params:{
            //         name:name,
            //         email:emails,
            //         comment:talk,
            //         index:1
            //     }
            // }).then(res=>{
            //     this.comments=res.data
            //     console.log(res.data)
            // })

            this.$axios.get("/api/comments",{
                params:{
                    comment:this.articalTitle1,
                    email:this.articalDescription1,
                    index:1,
                    name:this.name
                }
            }).then(res=>{
                this.msg=res.data
                console.log(res.data)
            })
        },
        deletes(index){
            // this.msg.splice(index,1)
            this.$axios("/api/comments/delete",{
                params:{
                    _id:this.msg[index]._id
                }
            }).then(res=>{
                this.msg=res.data;
            })

        }
    },
    mounted:function(){
        this.$axios.get("/api/comments/render").then(res=>{
                this.msg=res.data
                console.log(res.data)
            })
    }
   
}
</script>

<style scoped>

    .email-up{
        margin-top: 100px;
        display: flex;
        align-items: center;
    }
    .imgs{
        /* display: inline-block; */
        height: 100px;
        width: 110px;
        margin-right: 100px;
        margin-left: 50px;
    }
    .imgs img{
        width: 100%;
        height: 100%;
        border-radius: 17px;
        border: 2px solid;
    }
    .email-talk{
        /* display: inline-block; */
        width: 600px;
        text-align: center;
    }
    .email-talk input{
        border: 2px solid #18dec7;
        border-radius: 11px;
        background-color: black;
        color: #fff;
        height: 30px;
        width: 230px;
        font-size: 17px;
    }
    
    .email-talk .input-two{
        margin: 20px 15px 20px 15px;
    }
    textarea{
        border: 2px solid #18dec7;
        border-radius: 11px;
        background-color: black;
        color: #fff;
        height: 300px;
        width: 500px;
        font-size: 17px;
        resize: none;
        font-size: 17px;
    }
    .email-talk button{
        background-color: #18dec7;
        width: 500px;
        border: none;
        height: 40px;
        border-radius: 5px;
    }
    .email-down{
        margin-top: 30px;
        /* margin-bottom: 20px; */
    }
    .down-box{
        height: 40px;
        background-color: gray;
        width: 755px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        border-radius: 5px;
    }
    .email-content p{
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 700px;
    }
    .msg-item{
        height: 60px;
        border-bottom: 1px solid #fff;
        width: 95%;
        padding: 10px 0 10px 15px;
    }
    .msg-item .first{
        color: #ce8343;
        margin-right: 20px;
        font-size: 22px;
    }
    .msg-item .second{
        color: #989590;
        font-size: 13px;
    }
    .msg-item .third{
        font-size: 22px;
        color: #c4ffce;
        font-family: cursive;
    }
    .msg-item button{
        margin: 0;
        padding: 0;
        float: right;
        width: 50px;
        background-color: transparent;
        color: #fff;
        border: 1px solid;
    }
</style>